<!-- Market Depth Chart -->
<div id="market-depth-chart"></div>

<script type="text/javascript">

// Function to handle updating market depth chart
function updateMarketDepthChart( market, orderbook ){
    var types  = ['asks','bids'],
        orders = JSON.parse(JSON.stringify(orderbook)),
        assets = market.split('/'),
        asset1 = assets[0],
        asset2 = assets[1];
    // console.log('updateMarketDepthChart=',market, orderbook);
    // Store the orderbook price/volume data so we can easily reference in tooltips
    FW.MARKET_DEPTH = [];
    // Set second array value to total volume
    $.each(types, function(idx,name){
        var a = 0,
            b = 0;
        $.each(orders[name],function(ndx,data){
            data[2] = numeral(parseFloat(data[0]) * parseFloat(data[1])).format('0.00000000');
            a       = numeral(parseFloat(a) + parseFloat(data[1])).format('0.00000000');
            b       = numeral(parseFloat(b) + parseFloat(data[2])).format('0.00000000');
            data[1] = a;
            data[2] = b;
            FW.MARKET_DEPTH[parseFloat(data[0])] = [data[1],data[2],name];
        });
    });
    // Convert all values to floats
    $.each(types, function(idx,name){
        $.each(orders[name],function(ndx,data){
            data[0] = parseFloat(data[0]);
            data[1] = parseFloat(data[1]);
        });
    });
    // Sort the data in ascending order
    $.each(types, function(idx, name){
        orders[name].sort(function(a,b){
            if(a[0] < b[0]) return -1;
            if(a[0] > b[0]) return 1;
            return 0;            
        });
    });
    // Initialize the market depth chart (after a brief delay to let content load into DOM)
    setTimeout(function(){
        Highcharts.chart('market-depth-chart', {
            chart: {
                type: 'area',
                borderColor: '#DFD7CA',
                borderWidth: 1,
            },
            exporting: {
                enabled: true
            },
            title: {
              text: ''
            },
            lang: {
                noData: "No buy or sell orders found"
            },
            // Price
            xAxis: {
                allowDecimals: true,
                title: {
                    enabled: false
                }
            },
            // Volume
            yAxis: {
                allowDecimals: true,
                title: {
                    enabled: false
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                split: false,
                shared: true,
                useHTML: true,
                formatter: function(){
                    var data = FW.MARKET_DEPTH[this.x],
                        type = (data[2]=='bids') ? 'Buy' : 'Sell',
                        txt  = '<b>' + type + ' Depth</b>';
                    txt += '<table class="highcharts-tooltip-table">';
                    txt += '<tr class="first"><td>Price</td><td class="separator">:</td><td class="text-right">' + numeral(this.x).format('0,0.00000000') + '</td><td>' + asset2 + '</td></tr>';
                    txt += '<tr><td>Sum</td><td class="separator">:</td><td class="text-right">' + numeral(data[0]).format('0,0.00000000') + '</td><td>' + asset1 + '</td></tr>';
                    txt += '<tr><td colspan="2"></td><td class="text-right">' + numeral(data[1]).format('0,0.00000000') + '</td><td>' + asset2 + '</td></tr>';
                    txt += '</table>';
                    return txt;
                }
            },
            plotOptions: {
              area: {
                marker: {
                  // enabled: false,
                  symbol: 'circle',
                  radius: 2,
                  states: {
                    hover: {
                      enabled: true
                    }
                  }
                }
              }
            },
            series: [{ 
                name: 'Asks',
                color: '#a42015',
                data: orders.asks 
            }, { 
                name: 'Bids', 
                color: '#339349',
                data: orders.bids 
            }]
        });
        $('.highcharts-credits').remove();
       
    },10);

}

</script>